

function $(node){
    return document.querySelector(node);
}
function $all(node){
    return document.querySelectorAll(node);
}


/**
 * 切出页面 与 关闭页面
*/
;(function(){
    var d = document,
        loginBtn = $all('.login-btn'),

        loginGo = $('.login-go'),
        registerGo = $('.register-go'),
        returnBtn = $all('.return-btn');
    loginBtn[0].addEventListener('click', function(){
        loginGo.classList.add('login-go-js');
    });
    loginBtn[1].addEventListener('click', function(){
        registerGo.classList.add('register-go-js');
    });
    returnBtn[0].addEventListener('click', function(){
        loginGo.classList.remove('login-go-js');
    });
    returnBtn[1].addEventListener('click', function(){
        registerGo.classList.remove('register-go-js');
    });
})();


/**
 * 登录 与 注册
*/
;(function(){
    var loginGo = $('.login-go'),
        regGo = $('.register-go'),
        loginBtnGo = $('.login-btn-go'),
        regBtnGo = $('.reg-btn-go'); 

    
    // 登录
    function loginFn(){
       
        var name = $('.log-name').value,
            pass = $('.log-pass').value;
        
        var logObj = {
            name: name,
            pass: pass
        };
        // 验证
        var flag = logChecking(logObj);

        if(!flag) return;
        // 加载动画
        addLoad(0.2);
        ajax({
            url: './php/login.php',
            data: {
                name: name,
                pass: pass
            },
            method: 'post',
            success: function(res){
                // 关闭加载动画
                remLoad();
                console.log(res);
                if(res == 1){
                    elasticFrame('登录成功', function(){
                        // 关闭弹框前的回调
                        window.location.href = './index.html';
                    });
                }else if(res == 2){
                    elasticFrame('密码错误!');
                }else if(res == 0){
                    elasticFrame('该用户名不存在!');
                }

            }
        });
    }
    //注册
    function regFn(){
        var name = $('.reg-name').value,
            pass = $('.reg-pass').value,
            phone = $('.reg-phone').value,
            email = $('.reg-email').value;
        var aggree = $('.aggree');
        var regObj = {
            name: name,
            pass: pass,
            phone: phone,
            email: email
        }
        // 验证
        var flag = regChecking(regObj);  
        if(!flag) return;
        if(!aggree.checked){
            elasticFrame('请同意相关政策与协议!');
            return;
        }
        addLoad(.2);
        ajax({
            url: './php/reg.php',
            data: {
                name: name,
                pass: pass,
                phone: phone,
                email: email
            },
            method: 'post',
            success: function(res){
                remLoad();
                //console.log(res);
                if(res == 1){
                    elasticFrame('注册成功', function(){
                        // 关闭弹框前的回调
                        var loginGo = $('.login-go'),
                            registerGo = $('.register-go');
                        registerGo.classList.remove('register-go-js');
                        var timer = setTimeout(function(){
                            loginGo.classList.add('login-go-js');
                            clearTimeout(timer);
                        }, 150);
                    });
                }else if(res == 0){
                    elasticFrame('注册失败(请联系相关人员!)');
                }else if(res == 3){
                    elasticFrame('该手机号码已被注册!');
                    inputStyle('.reg-phone', '该手机号码已被注册!');
                }else if(res == 4){
                    elasticFrame('该邮箱已被注册!');
                    inputStyle('.reg-email', '该邮箱已被注册!');
                }else if(res == 2){
                    elasticFrame('该用户名已被注册!');
                    inputStyle('.reg-name', '该用户名已被注册!');
                }else{
                    elasticFrame('注册失败(请联系相关人员!)');
                }
            }
        }); 
    }
    loginBtnGo.addEventListener('click', loginFn);
    regBtnGo.addEventListener('click', regFn);
})();




/**
 * 登录验证
*/function logChecking(obj){
    var name = obj.name.trim(),
        pass = obj.pass.trim();
    var flag = true;
    if(name == ''){
        inputStyle('.log-name', '!用户名不能为空');
        flag = false;
    }else if(!regCheck.name.test(name)){
        inputStyle('.log-name', '该用户不存在');
        flag = false;
    }

    if(pass == ''){
        inputStyle('.log-pass', '!密码不能为空');
        flag = false;
    }else if(!regCheck.pass.test(pass)){
        inputStyle('.log-pass', '密码错误');
        flag = false;
    }
    return flag;
}



/**
 * 注册验证
*/
function regChecking(obj){
    var name = obj.name.trim(),
        pass = obj.pass.trim(),
        phone = obj.phone.trim(),
        email = obj.email.trim();
    var flag = true;
    if(name == ''){
        inputStyle('.reg-name', '!用户名不能为空');
        flag = false;
    }else if(!regCheck.name.test(name)){
        inputStyle('.reg-name', '!用户名由4-12位英文数字组成');
        flag = false;
    }

    if(pass == ''){
        inputStyle('.reg-pass', '!密码不能为空');
        flag = false;
    }else if(!regCheck.pass.test(pass)){
        inputStyle('.reg-pass', '!密码名由6-12位英文数字组成');
        flag = false;
    }

    if(phone == ''){
        inputStyle('.reg-phone', '!手机号码不能为空');
        flag = false;
    }else if(!regCheck.phone.test(phone)){
        inputStyle('.reg-phone', '!手机号码不存在');
        flag = false;
    }

    if(email == ''){
        inputStyle('.reg-email', '!邮箱不能为空');
        flag = false;
    }else if(!regCheck.email.test(email)){
        inputStyle('.reg-email', '!邮箱格式错误');
        flag = false;
    }
    return flag;
}




/**
 *  注册 :得到或失去焦点时验证
 * @param {object} This this指向(元素节点)
 * @param {string} field 验证类型
 * @param {object} inputClass 要修改的input类名
*/
function checking(This, field, inputClass){
    var value = This.value;
    switch(field){
        case 'name': 
            if(value == ''){
                inputStyle(inputClass, '!用户名不能为空');
            }else if(!regCheck.name.test(value)){
                inputStyle(inputClass, '!用户名由4-12位英文数字组成');
            }
            break;
        case 'pass':
            if(value == ''){
                inputStyle(inputClass, '!密码不能为空');
            }else if(!regCheck.pass.test(value)){
                inputStyle(inputClass, '!密码名由6-12位英文数字组成');
            }
            break;
        case 'phone':
            if(value == ''){
                inputStyle(inputClass, '!手机号码不能为空');
            }else if(!regCheck.phone.test(value)){
                inputStyle(inputClass, '!手机号码不存在');
            }
            break;
        case 'email':
            if(value == ''){
                inputStyle(inputClass, '!邮箱不能为空');
            }else if(!regCheck.email.test(value)){
                inputStyle(inputClass, '!邮箱格式错误');
            }
            break;
    }
}

/**
 * input获取焦点和input失去焦点 绑定事件函数
*/
;(function(){
    var loginGo = $('.login-go'),
        regGo = $('.register-go'),
        
        logName = $('.log-name'),
        logPass = $('.log-pass'),
        regName = $('.reg-name'),
        regPass = $('.reg-pass'),
        regPhone = $('.reg-phone'),
        regEmail = $('.reg-email');
    
    logName.addEventListener('blur', function(){
        checking(this, 'name', '.log-name');
    });
    logName.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });

    logPass.addEventListener('blur', function(){
        checking(this, 'pass', '.log-pass');
    });
    logPass.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });

    // reg-用户名
    regName.addEventListener('blur', function(){
        checking(this, 'name', '.reg-name');
    });
    regName.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });
    // reg-密码
    regPass.addEventListener('blur', function(){
        checking(this, 'pass', '.reg-pass');
    });
    regPass.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });
    // reg-手机
    regPhone.addEventListener('blur', function(){
        checking(this, 'phone', '.reg-phone');
    });
    regPhone.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });
    // reg-邮箱
    regEmail.addEventListener('blur', function(){
        checking(this, 'email', '.reg-email');
    });
    regEmail.addEventListener('focus', function(){
        this.classList.remove('logregStyle-js');
        this.parentNode.setAttribute('data-reg', '');
    });
})();



/**
 * input样式修改
 * @param {string} inputClass 要改样式的类名
 * @param {string} val 向用户提示错误信息
*/
function inputStyle(inputClass, val){
    var input = $(inputClass);
    // xiang向用户提示错误信息
    input.parentNode.setAttribute('data-reg', val);
    // 修改错误信息样式
    input.classList.add('logregStyle-js');
}


/*
* 正则判断对象
* 需求:
* (1) name 用户名 长度为4-12位 英文字母数字组合(不区分大小写)
* (2) pass 密码 长度为6-12位 英文数字(不区分大小写)
* (3) phone 手机号码 不是 11 12 开头
* (4) email 邮箱 字母或数字开头 中间可以数字,字母,下划线或"_"或 "."   然后"@后面数字或字母 然后 "." 或"-" 数字或字母
*/
var regCheck = {
    name: /^\w{4,12}$/i,
    pass: /^\w{6,12}$/i,
    phone: /^1[^12]\d{9}$/,
    email: /^[\w][\w_\-\.]*@[\w_\-\.]+$/
};